<template>
  <div v-loading="loading" class="department-wrap flex-row-between">
    <div
      class="department-wrap-item"
      v-for="sortItem of sortList"
      :key="sortItem.title"
    >
      <h1 class="department-wrap-item-title flex-row-between">
        {{ sortItem.title }}
        <img
          class="department-wrap-item-title-line"
          src="@screen/images/leader-assign-line.png"
        />
      </h1>
      <div class="department-wrap-item-sort">
        <EmptyData v-if="!sortItem.list.length" />
        <div v-else class="department-wrap-item-sort-content">
          <div
            v-for="sort in sortItem.list"
            :key="sort.sort"
            class="flex-row-between department-wrap-item-sort-item"
          >
            <div
              class="department-wrap-item-sort-item-left flex-1 flex-row-start"
            >
              <img
                class="sort-level"
                v-if="sort.sort === 1"
                src="@screen/images/first.png"
                alt=""
              />
              <img
                class="sort-level"
                v-else-if="sort.sort === 2"
                src="@screen/images/second.png"
                alt=""
              />
              <img
                class="sort-level"
                v-else-if="sort.sort === 3"
                src="@screen/images/third.png"
                alt=""
              />
              <div
                v-else
                class="department-wrap-item-sort-item-left-tag flex-row-center"
              >
                <span>No.{{ sort.sort }}</span>
              </div>
              <div
                class="department-wrap-item-sort-item-left-unit flex-1 text-ellipsis"
              >
                {{ sort.unitForShort }}
              </div>
            </div>
            <div class="department-wrap-item-sort-item-num">
              {{ sort.totalScore }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import useFetch from '@/hooks/useFetch'
import { generatePageParams } from '@screen/utils/index'
import { ref } from 'vue'
import { queryDepartmentalAssessment } from '../../apis'
import EmptyData from '../EmptyData.vue'

const sortList = ref([])

const { loading, onFetchSuccess } = useFetch<Record<string, any>[]>(
  queryDepartmentalAssessment,
  generatePageParams(),
  true,
  false,
)
onFetchSuccess((data) => {
  if (data) {
    sortList.value = [
      {
        title: '前十名',
        list: data[1] ?? [],
      },
      {
        title: '后十名',
        list: data[2]?.length ? data[2]?.reverse() : [],
      },
    ]
  }
})
</script>

<style lang="scss" scoped>
.department-wrap {
  width: 100%;
  position: relative;
  padding: vh(20) 0 0;

  &-item {
    width: vw(544);
    &-title {
      margin-bottom: vh(16);
      font-size: vw(16);
      font-weight: 700;
      &-line {
        width: vw(476);
      }
    }
    &-sort {
      height: vh(338);
      padding: vh(20) vw(16) vh(8);
      border-radius: vw(4);
      background: linear-gradient(
        165.2deg,
        rgba(50, 116, 191, 0.1) 0%,
        rgba(124, 143, 161, 0.1) 100%
      );

      &-content {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        grid-gap: vw(12);
      }

      &-item {
        width: vw(250);
        height: vh(50);
        padding: 0 vw(20);
        opacity: 1;
        border-radius: vw(4);
        background: linear-gradient(
          165.2deg,
          rgba(50, 116, 191, 0.1) 0%,
          rgba(124, 143, 161, 0.1) 100%
        );

        &-left {
          min-width: vw(100);
          .sort-level {
            width: vw(40);
            height: vh(26);
          }
          &-tag {
            width: vw(40);
            height: vh(26);
            opacity: 1;

            font-size: vw(12);
            font-weight: 700;
            background: linear-gradient(
              180deg,
              rgba(121, 124, 128, 1) 0.63%,
              rgba(186, 192, 198, 1) 100%
            );
            border: vw(1) solid rgba(65, 73, 94, 1);
            border-radius: vw(4);
            overflow: hidden;
          }

          &-unit {
            min-width: vw(40);
            margin-left: vw(16);
            overflow: hidden;
          }
        }

        &-num {
          font-size: vw(16);
          font-weight: 700;
          font-family: 'DDin', sans-serif;
        }
      }
    }
  }
}
</style>
